<template>
  <!-- :width="850" -->
  <a-modal
    :width="1040"
    :visible="visible"
    title=""
    @ok="handleOk"
    @cancel="handleClose"
    :footer="(activeKey != 'system_materials' && showMaterial) ? undefined : null"
    centered
    :zIndex="1003"
    >
    <!-- {{ activeKey }}
    {{showMaterial}} -->
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name">
        <!-- 项目素材 -->
        <div class="merchant_materials" v-if="item.key == 'merchant_materials'">
          <div class="left_menu">
            <div class="menu_con" v-if="showSingleMenu">
              <div
                class="menu_item"
                :class="currentMaterialId == item.id ? 'active' : ''"
                @click="chooseLibrary(item, index)"
                v-for="(item, index) in libraryList"
                :key="index"
              >
                {{ item.group_name }}
              </div>
            </div>
            <!-- 左侧项目层级菜单 -->
            <div class="parent_con" v-else>
              <div
                class="parent_item"
                v-for="(parent_item, parent_index) in menuList"
                :key="parent_index"
              >
                <div class="parent_name" @click="expandThis(parent_item)">
                  <div>{{ parent_item.name }}</div>
                  <DownOutlined
                    class="expand_icon"
                    v-if="parent_item?.expand"
                  />
                  <UpOutlined class="expand_icon" v-else />
                </div>
                <div class="menu_con" v-if="parent_item?.expand">
                  <div
                    class="menu_item"
                    @click="chooseLibrary(item, index)"
                    :class="currentMaterialId == item.id ? 'active' : ''"
                    v-for="(item, index) in parent_item?.folder_group"
                    :key="index"
                  >
                    {{ item?.group_name }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧文件 -->
          <div class="right_material">
            <div
              class="folder_con"
              v-if="!showMaterial && libraryList.length > 0"
            >
              <folderList
                :istongyong="false"
                :material_type="material_type"
                :isLoading="folderLoading"
                :list="folderData"
                :isvideoGroup="isvideoGroup"
                :extension="extension"
                :NewMemory="NewMemory"
                @uploadSuccess="uploadSuccess"
                @choose="chooseFolder"
                @getChoose="floder_videoDate"
                @newFolder="newSubFolder"
              />
            </div>

            <div
              class="material_con"
              v-if="showMaterial && libraryList.length > 0"
            >
              <!-- 传入  已选中的  素材 -->
              <materialList
                ref="materialListRef"
                v-if="visible"
                :selectNum="currentMaterialArr.length"
                :istongyong="false"
                :multiple="multiple && !isClip"
                :showContent="showContent"
                :isLoading="materialLoading"
                :list="materialData"
                :Dfolder_type="Dfolder_type"
                :folder_name="folder_name"
                :Now_merchant_folder_statck_id="Now_merchant_folder_statck_id"
                :useType="useType"
                :extension="extension"
                @cancelChecked="cancelChecked"
                @getChoose="getChooseMaterial"
                @back="materialListBack"
                @uploadMaterial="materialVisible = true"
                @refreshList="refreshList"
              />
            </div>
            <div class="no-shuju" v-if="libraryList.length == 0">
              <span class="no-shuju-text">暂无项目</span>
              <a-button type="link" @click="buildProject"
                >前往创建项目</a-button
              >
            </div>

            <div class="bottom_pagination" v-if="showMaterial">
              <a-pagination 
              v-model:pageSize="paginationData.pageSize" 
              v-model:current="paginationData.current" 
              show-quick-jumper 
              :total="paginationData.total" @change="paginationChange" />
            </div>
          </div>
        </div>
        <!-- 通用素材 -->
        <div class="general_materials" v-if="item.key == 'general_materials'">
          <div class="folder_con" v-if="!showMaterial">
            <folderList
              :istongyong="true"
              :material_type="material_type"
              :isLoading="folderLoading"
              :list="folderData"
              :NewMemory="NewMemory"
              @uploadSuccess="uploadSuccess_tong"
              @choose="chooseFolder"
              @newFolder="newSubFolder"
            />
          </div>

          <div class="material_con" v-else>
            <materialList
              v-if="visible"
              :istongyong="true"
              :multiple="multiple && !isClip"
              :Dfolder_type="Dfolder_type"
              :isLoading="materialLoading"
              :list="materialData"
              :folder_name="folder_name"
              :Now_merchant_folder_statck_id="Now_merchant_folder_statck_id"
              @getChoose="getChooseMaterial"
              @back="showMaterial = false"
              @uploadMaterial="materialVisible = true"
              @cancelChecked="cancelChecked"
            />
          </div>

          <div class="bottom_pagination" v-if="showMaterial">
              <a-pagination 
              v-model:pageSize="paginationData.pageSize" 
              v-model:current="paginationData.current" 
              show-quick-jumper 
              :total="paginationData.total" @change="paginationChange" />
            </div>
        </div>
        <!-- 标签素材 -->
        <div class="tip_materials" v-if="item.key == 'tip_materials'">
          <div class="left_menu">
            <div
              class="left_menu_tip"
              v-for="(v1, v1_index) in TipMenuList"
              :key="v1_index"
            >
              <div class="Tip_menu_item" @click="ToTipDetail(v1_index)">
                <span class="Tip_menu_title"> {{ v1.name }} </span>
                <DownOutlined
                  class="expand_icon"
                  v-if="v1.isClicked == false"
                />
                <UpOutlined class="expand_icon" v-else />
              </div>

              <div class="Bottom_menu_tip" v-if="v1.isClicked">
                <span
                  v-if="v1.itemData && item.key == 'tip_materials'"
                  class="Bottom_menu_title"
                  v-for="(v2, v2_index) in v1.itemData"
                  :key="v2_index"
                >
                  <a-checkable-tag
                    :checked="selectedTags.indexOf(v2) > -1"
                    @change="(checked) => handleChange(v2, checked)"
                    @click="toDetail(v2)"
                  >
                    <a-tooltip
                      zIndex="9999"
                      v-if="v2?.name?.length > 10"
                      :title="v2?.name"
                    >
                      <span class="Tip_menu_title" style="cursor: pointer">
                        {{ `${v2?.name?.slice(0, 10)}...` }}
                      </span>
                    </a-tooltip>
                    <span class="Tip_menu_title" v-else>
                      {{ v2.name }}
                    </span>
                  </a-checkable-tag>
                </span>
              </div>
            </div>
          </div>

          <!-- 右侧文件 -->
          <div class="right_material">
            <div class="folder_con">
              <div class="material_con">
                <materialList
                  :multiple="multiple && !isClip"
                  @getChoose="getChooseMaterial"
                  @back="showMaterial = false"
                  @uploadMaterial="materialVisible = true"
                  @cancelChecked="cancelChecked"
                  :is_tag="true"
                  :isTip="fasle"
                  :isLoading="materialLoading"
                  :list="materialData"
                  :material_type="material_type"
                />

                <div class="bottom_pagination">
              <a-pagination 
              v-model:pageSize="paginationData.pageSize" 
              v-model:current="paginationData.current" 
              show-quick-jumper 
              :total="paginationData.total" @change="paginationChange" />
            </div>
              </div>
            </div>
          </div>
        </div>
        <template v-if="item.key == 'system_materials'">
          <div class="system_materials">
            <div class="top_serchform_box">
              <div class="serch_box">
                <div class="serch_item">
                  <span class="serch_title">标签筛选：</span>
                  <a-select
                    ref="select"
                    v-model:value="systemMaterialSerchData.category"
                    style="width: 150px"
                    placeholder="请选择标签"
                    allowClear
                    @change="resetPage"
                    :disabled="importLoading"
                  >
                    <!-- size="small" -->
                    <a-select-option
                      v-for="item in categoryList"
                      :key="item.key"
                      :value="item.key"
                      >{{ item.name }}</a-select-option
                    >
                  </a-select>
                </div>
                <div class="serch_item">
                  <!-- {{ material_type }} -->
                  <span class="serch_title">素材类型：</span>
                  <a-radio-group
                    :disabled="importLoading"
                    v-model:value="systemMaterialSerchType"
                    name="radioGroup"
                    @change="systemMaterialSerchTypeChange"
                  >
                    <a-radio
                      value="image"
                      :disabled="
                        material_type != 'video_image' &&
                        material_type != 'image'
                      "
                      >图片</a-radio
                    >
                    <a-radio
                      value="video"
                      :disabled="
                        material_type != 'video_image' &&
                        material_type != 'video'
                      "
                      >视频</a-radio
                    >
                  </a-radio-group>
                </div>
                <div class="serch_item">
                  <span class="serch_title">关键词：</span>
                  <a-input
                    v-model:value="systemMaterialSerchData.query"
                    placeholder="请输入查询关键词"
                  />
                  <!-- size="small" -->
                </div>

                <div class="btns">
                  <a-button
                    type="primary"
                    :disabled="importLoading"
                    @click="resetPage"
                    >搜索</a-button
                  >
                  <a-button @click="resertSerchData" :disabled="importLoading"
                    >重置</a-button
                  >
                </div>
              </div>
            </div>

            <div class="table_box">
              <a-spin
                :spinning="loading"
                v-if="loading"
                style="
                  width: 100%;
                  height: 420px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
              </a-spin>
              <template v-if="dataSource.length">
                <!-- 素材列表 -->
                <template v-if="systemMaterialSerchType == 'image'">
                  <div
                    class="material_item_image"
                    v-for="item in dataSource"
                    :key="item.id"
                    @click="materialBoxClick(item)"
                  >
                    <EyeFilled
                      class="bottom_icon"
                      @click.stop="toview(item.largeImageURL, 'img')"
                    />
                    <a-checkbox
                      class="top_checkbox"
                      v-model:checked="item.checked"
                      @change="itemSelectChange($event, item)"
                      :disabled="importLoading"
                    ></a-checkbox>
                    <div class="is_content">
                      <img :src="item.previewURL" alt="" />
                    </div>
                    <!-- <div class="item_bottom_box">
                      <span class="material_name">{{ item.tags }}</span>
                    </div> -->
                  </div>
                </template>

                <template
                  v-else-if="
                    systemMaterialSerchType == 'video' && dataSource.length
                  "
                >
                  <div
                    class="material_item_image"
                    v-for="item in dataSource"
                    :key="item.id"
                    @click="materialBoxClick(item)"
                  >
                    <EyeFilled
                      class="bottom_icon"
                      @click="toview(item.videos.tiny.url, 'video')"
                    />
                    <a-checkbox
                      class="top_checkbox"
                      v-model:checked="item.checked"
                      @change="itemSelectChange"
                    ></a-checkbox>
                    <div class="is_content" v-if="item?.videos">
                      <img :src="item.videos.tiny.thumbnail" alt="" />
                    </div>
                    <!-- <div class="item_bottom_box">
                      <span class="material_name">{{ item.tags }}</span>
                    </div> -->
                  </div>
                </template>
              </template>

              <template v-else-if="!dataSource.length && !loading">
                <div class="emptyBox">
                  <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                </div>
              </template>
            </div>

            <div class="pagination">
              <a-button
                type="link"
                @click="getPrev"
                :disabled="systemMaterialSerchData.page <= 1 || importLoading"
                >上一页</a-button
              >
              <a-button
                type="link"
                @click="getNext"
                :disabled="!has_more || importLoading"
                >下一页</a-button
              >

              <a-checkbox
                v-if="multiple"
                v-model:checked="checkAll"
                :indeterminate="indeterminate"
                @change="onCheckAllChange"
                :disabled="importLoading"
              >
                全选
              </a-checkbox>
            </div>

            <div class="bottom_btns">
              <a-button
                type="primary"
                :loading="importLoading"
                @click="submitSystemMaterial"
                :disabled="!checkeds.length"
                >确定</a-button
              >
              <a-button @click="cancelUpload">取消</a-button>
            </div>
          </div>
        </template>
      </a-tab-pane>
    </a-tabs>

    <!-- 新建文件夹 -->
    <NewFolder
      :visible="addVisible"
      :groupData="currentLibrary"
      @onCancel="addVisible = false"
      @onSubmit="closeAdd"
      :checkedSelectType="material_type"
      :menuList="menuList"
      :current_name="current_name"
    />

    <!-- 上传文件 新 -->
    <NewUploadFileModal
      :visible="materialVisible"
      :type="currentFolder?.folder_type"
      :fileData="currentFolder"
      :extension="extension"
      @cancel="materialVisible = false"
      @onSubmit="closeMaterial"
    />
    <copperImage
      @getCropper="getCropper"
      :visible="copperVisible"
      @close="copperVisible = false"
      :imageUrl="currentMaterial.material_url"
    />
  </a-modal>
  <!-- 视频预览 -->
  <viewVideo ref="viewVideoRef"></viewVideo>

  <!-- 图片预览 -->
  <viewImg ref="viewImgRef"></viewImg>

  <!-- 选择网络素材 loding 弹窗 -->
  <awaitImportMaterial
    ref="awaitImportMaterialRef"
    :progress="progress"
    @isClose="awaitImportMaterialRefClose"
  >
  </awaitImportMaterial>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
  computed,
} from "vue";
import { message, notification } from "ant-design-vue";
import { DownOutlined, UpOutlined, EyeFilled } from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import NewUploadFileModal from "@/views/shotstack/MaterialCenter/modules/NewUploadFileModal.vue";

import utils from "@/common/utils/utils";

import NewFolder from "../../../../MaterialCenter/modules/NewFolder.vue";
import store from "@/store";
import request from "../../../../../../common/utils/request";
import folderList from "./folderList.vue";
import materialList from "./materialList.vue";
import UploadFileModal from "../../../../MaterialCenter/modules/UploadFileModal.vue";
import copperImage from "./copperImage.vue";

// 图片查看弹窗
import viewImg from "@/views/shotstack/components/dialogComponent/viewImg.vue";

// 选择网络素材 loding 弹窗
import awaitImportMaterial from "@/views/shotstack/components/dialogComponent/awaitImportMaterial.vue";

// 空状态
import { Empty } from "ant-design-vue";
// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
const viewVideoRef = ref(null);

// 系统素材, 标签类型
import { categoryList, columns } from "../js/index.js";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 混剪的 镜头组来的  特殊处理
    isvideoGroup: {
      type: Boolean,
      default: false,
    },
    // 是否支持剪辑 （支持剪辑时 不支持多选）
    isClip: {
      type: Boolean,
      default: true,
    },
    // 素材类型
    material_type: {
      type: String,
      default: "image",
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 当前镜头组下标
    targetIndex: {
      type: Number,
      default: 0,
    },
    showContent: {
      type: Array,
      default: () => {
        return [];
      },
    },
    haveTags: {
      // hiddeTags: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 使用的地方,  默认是混剪
    useType: {
      type: String,
      default: () => {
        return "mixedCutCreat";
      },
    },
    // 后缀
    extension: {
      type: String,
      default: "",
    },

    // 用于回显的文件夹项目层级id
    folder_ids: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    NewFolder,
    folderList,
    materialList,
    UploadFileModal,
    copperImage,
    awaitImportMaterial,
    viewImg,
    EyeFilled,
    viewVideo,
    DownOutlined,
    UpOutlined,
    NewUploadFileModal,
  },
  setup(props, context) {
    // TODO 素材库弹窗

    const route = useRoute();
    const router = useRouter();

    // 图片预览实例
    const viewImgRef = ref(null);

    // loding 弹窗实例
    const awaitImportMaterialRef = ref(null);

    // 判断是阿里云还是原系统
    const work_ai_config = computed(() => {
      let config = store?.state?.shotstack?.work_ai_config || {};
      // return false;
      return config?.shotstack_driver == "alionline";
    });

    const getTabList = () => {
      return [
      {
          name: "项目素材",
          key: "merchant_materials",
        },
        {
          name: "通用素材",
          key: "general_materials",
        },
        {
          name: "标签素材",
          key: "tip_materials",
        },
      ]
    }

    const state = reactive({
      activeKey: "merchant_materials",
      tabList: getTabList(),
      folder_name: "",
      addVisible: false,
      libraryList: [],
      currentLibrary: {},
      folderLoading: false,
      folderData: [],
      currentFolder: {},
      materialLoading: false,
      materialData: [],
      showMaterial: false,
      materialVisible: false,
      currentMaterial: {},
      currentMaterialArr: [],
      copperVisible: false,
      menuList: [],
      TipMenuList: [],
      showSingleMenu: true,
      currentMaterialId: null,
      checkedgroupId: "",
      isClicked: false,
      queryTip: {
        tagGroupIds: [],
        tagIds: [],
        folder_use_type: "1",
        material_type: "",
      },
      Tipitem: {},
      selectedTags: [],
      add_merchant_library_id: "",
      add_group_id: "",
      Dfolder_type: "",
      current_name: "",

      // 系统素材, 默认搜索的类型 image || video
      systemMaterialSerchType:
        props.material_type == "video_image" ? "video" : props.material_type,
      // 系统素材列表, 是否还有更多
      has_more: true,
      // 系统素材列表展示数据
      dataSource: [],
      // 页面加载loading
      loading: false,
      systemMaterialSerchData: {
        // 搜索的关键词
        query: "",
        // 筛选的类型
        category: "all",
        page: 1,
        pageSize: 12,
      },
      // 图片的宽高配置
      imgConfig: {
        height: 120,
        width: 220,
      },
      // 点击确定导入的时候 loading
      importLoading: false,
      // 全选
      checkAll: false,
      // 半选
      indeterminate: false,

      // 使用回显的文件夹id 开关(仅仅在首次打开时使用)
      folder_use: {
        // 项目id使用
        merchant_library_id: false,
        // 文件夹id使用
        merchant_folder_statck_id: false,
      },

      // 存储当前使用的项目id文件夹id等信息
      storeMemory: {
        merchant_library_id: null,
        merchant_folder_statck_id: null,
        group_id: null,
      },

      NewMemory: {
        group_id: "",
        merchant_library_id: "",
      },

      Now_merchant_folder_statck_id: "",
    });

    // 获取标签菜单
    const getTipMenu = () => {
      state.materialData = [];
      const params = {
        filter_unlabeled: 1,
      };
      request
        .get("/work_ai", "/user/shotstack/multimedia/tagGroupSelect", params)
        .then((res) => {
          state.TipMenuList = res.result.select.map((item) => ({
            ...item,
            isClicked: false,
          }));
          ToTipDetail(0);
        });
    };

    // 点击标签菜单--上色--继续查
    const ToTipDetail = (index) => {
      // 确保 state.TipMenuList 以及 state.TipMenuList[index] 是已定义的
      if (state.TipMenuList && state.TipMenuList[index]) {
        // 使用可选链 (?.) 操作符来安全地访问 isClicked 属性
        state.TipMenuList[index].isClicked =
          !state.TipMenuList[index]?.isClicked;

        Tipitem(index);
      } else {
        // 此处理错误或者给出提示
      }
    };

    // 标签组id 获取组下的标签
    const Tipitem = (index) => {
      let querydata = {
        tag_group_id: state.TipMenuList[index].id,
        pageSize: 0,
      };
      request
        .get("/work_ai", "/user/shotstack/multimedia/tagList", querydata)
        .then((res) => {
          if (res.result.length > 0) {
            state.TipMenuList[index].itemData = [];
            state.TipMenuList[index].itemData = res.result.map((item) => ({
              ...item,
              checked: false,
            }));
            handleChange(state.TipMenuList[0].itemData[0], true);
            // state.selectedTags = state.selectedTags.filter((item, index, arr) =>
            // 	arr.findIndex((i) => i.name === item.name) === index
            // );
            // state.selectedTags.splice(0, 1);
          }
        });
    };

    // 选中标签  可单选可多选
    const handleChange = (tag, checked) => {
      const nextSelectedTags = checked
        ? [...state.selectedTags, tag]
        : state.selectedTags.filter((t) => t !== tag);
      state.selectedTags = nextSelectedTags;
      toDetail();
    };

    // 点击标签 查询大的详情
    const toDetail = () => {
      if (state.selectedTags.length > 0) {
        state.materialData = [];
        state.queryTip.tagIds = [];
        state.materialLoading = true;
        state.selectedTags.forEach((item) => {
          state.queryTip.tagIds.push(item.id);
        });
        state.queryTip.material_type = props.material_type;
        request
          .get("/work_ai", "/user/shotstack/tag/multimedia", {
            ...state.queryTip,
            ...paginationData
          })
          .then((res) => {
            state.materialData = res.result.data;
            state.materialLoading = false;
            state.showMaterial = true;
          });
      } else {
        state.materialData = [];
      }
    };

    const floder_videoDate = (data) => {
      emitFn(data);
    };

    const handleOk = () => {
      console.log(state.currentMaterial,'是什么格式??');
      
      if (
        props.multiple &&
        !props.isClip &&
        !state.currentMaterialArr?.length
      ) {
        message.warn("至少选择一个素材");
        return;
      }
      if (
        (!props.multiple || props.isClip) &&
        !state.currentMaterial?.material_url
      ) {
        if (props.material_type == "text" || props.material_type == "audio") {
          if (state.currentMaterial?.checked) {
            emitFn(state.currentMaterial);
          }
        } else {
          message.warn("请先选择一个素材");
        }
        state.showMaterial = false;
        return;
      }

      if (props.isClip && props.material_type == "image") {
        state.copperVisible = true;
        return;
      }
      if (!props.multiple || props.isClip) {
        emitFn(state.currentMaterial);
        return;
      }
      state.showMaterial = false;

      emitFn(state.currentMaterialArr);
    };

    const handleClose = () => {
      state.showMaterial = false;
      cancelUpload();
    };

    // 新建子文件夹  更改状态  传参
    const newSubFolder = () => {
      let huixianLibrary = {};

      if (state.activeKey == "merchant_materials") {
        state.currentLibrary = state.menuList.flatMap((library) => {
          const foundItemInGroup = library.folder_group.find(
            (item) => item.id === state.checkedgroupId
          );
          return foundItemInGroup ? [foundItemInGroup] : [];
        })[0];

        huixianLibrary = state.menuList.find((library) => {
          const foundItemInGroup = library.folder_group.find(
            (item) => item.id === state.checkedgroupId
          );
          // 当在当前library的folder_group中找到匹配项时，返回整个library对象
          return foundItemInGroup ? library : undefined;
        });

        state.current_name = `${huixianLibrary.name}/${state.currentLibrary.group_name}`;
      } else {
        state.current_name = "null";
        state.currentLibrary = {
          merchant_library_id: 0,
        };
      }

      state.addVisible = true;
    };

    // 添加按钮
    const closeAdd = (data) => {
      state.add_merchant_library_id = data.merchant_library_id;
      state.add_group_id = data.group_id;
      state.addVisible = false;
      if (state.activeKey == "merchant_materials") {
        state.menuList.forEach((item) => {
          if (item.merchant_library_id == data.merchant_library_id) {
            chooseLibrary(item);
          }
        });
        getFolderList({ merchant_library_id: 0 });
      } else {
        state.libraryList = [];
        getFolderList({ merchant_library_id: 0 });
      }
    };

    // 左侧大目录
    const getLibraryList = (merchant_library_id) => {
      request
        .get("/work_ai", "/user/shotstack/library/withGroup/list", {
          merchant_library_id,
        })
        .then((res) => {
          let index = res.result.findIndex(
            (item) => item.id == merchant_library_id
          );
          if (!res.result?.length) {
            state.libraryList = [];
            state.folderData = [];

            return;
          }
          if (index != -1) {
            state.libraryList = res.result[index].folder_group;
            state.currentMaterialId = state.libraryList[0].id;

            state.NewMemory.group_id = state.currentMaterialId;
            state.NewMemory.merchant_library_id = res.result[index].id;
            getFolderList({
              merchant_library_id: res.result[index].id,
              id: state.currentMaterialId,
            });
          } else {
            state.showSingleMenu = false;
            state.menuList = res.result;

            // 首次回显打开的文件夹 逻辑
            const find = res.result.find(
              (item) => item.id == state.storeMemory.merchant_library_id
            );

            if (
              !state.folder_use.merchant_library_id &&
              !!state.storeMemory.merchant_library_id &&
              find
            ) {
              state.libraryList = find.folder_group;
              state.checkedgroupId = find.folder_group[0].id;
              find["expand"] = true;
              state.currentMaterialId = find.folder_group[0].id;
              state.NewMemory.group_id = state.currentMaterialId;
              state.NewMemory.merchant_library_id = find.id;
              getFolderList({
                merchant_library_id: find.id,
                id: state.currentMaterialId,
              });

              // 使用一次之后 变为true
              state.folder_use.merchant_library_id = true;
            } else {
              state.libraryList = res.result[0].folder_group;
              state.folder_use.merchant_library_id = true;
              state.checkedgroupId = state.menuList[0].folder_group[0].id;
              state.menuList[0]["expand"] = true;
              state.currentMaterialId = state.menuList[0].folder_group[0].id;
              state.NewMemory.group_id = state.currentMaterialId;
              state.NewMemory.merchant_library_id = state.menuList[0].id;
              getFolderList({
                merchant_library_id: state.menuList[0].id,
                id: state.currentMaterialId,
              });
            }
          }
        });
    };

    const uploadSuccess = (params) => {
      getFolderList({
        merchant_library_id: params.merchant_library_id,
        id: params.group_id,
      });
    };

    const uploadSuccess_tong = (params) => {
      getFolderList({
        merchant_library_id: 0,
      });
    };

    // 选择文件夹
    const getFolderList = (params) => {
      let obj = {};
      obj.merchant_library_id = params.merchant_library_id;
      obj.folder_use_type = 1;
      obj.group_id = params.id;
      obj.pageSize = 0;
      obj.extensions = [];
      if (params.material_type) {
        obj.material_type = params.material_type;
      }
      if (props.material_type) {
        obj.material_type = props.material_type;
      }
      state.folderLoading = true;
      state.folderData = [];
      if (state.add_merchant_library_id !== "") {
        obj.merchant_library_id = state.add_merchant_library_id;
        obj.group_id = state.add_group_id;
        // obj.group_id = state.add_merchant_library_id
      }
      if (props.extension) {
        props.extension.split(",").forEach((item) => {
          obj.extensions.push(removeDotAtStart(item));
        });
      }

      // 如果是项目素材 则存储当前使用的素材库id数据
      if (state.activeKey == "merchant_materials") {
        Object.assign(state.storeMemory, {
          merchant_library_id: obj.merchant_library_id,
          group_id: obj.group_id,
        });
      }

      request
        .post("/work_ai", "/user/shotstack/folder/list", obj)
        .then((res) => {
          if (props.isvideoGroup && props.isvideoGroup == true) {
            state.folderData = res.result.map((item) => ({
              ...item,
              checked: false,
            }));
          } else {
            state.folderData = res.result;
          }
          // 如果需要回显文件夹
          if (
            !state.folder_use.merchant_folder_statck_id &&
            state.storeMemory.merchant_folder_statck_id
          ) {
            // 回显对应的文件夹id
            const find = state.folderData.find(
              (item) => item.id == state.storeMemory.merchant_folder_statck_id
            );
            // 首次打开回显对应的文件夹
            chooseFolder(find);
            state.folderLoading = false;
            // 使用一次之后 变为true
            state.folder_use.merchant_folder_statck_id = true;
            return;
          }
          state.folderLoading = false;
        });
    };

    const handleTabChange = (key) => {
      // 还原分页
      const basePaginationData = refreshPaginationData()
      Object.assign(paginationData, basePaginationData)
      // 改变之后 关闭回显开关
      state.folder_use.merchant_folder_statck_id = true;
      state.folder_use.merchant_library_id = true;
      state.showMaterial = false;
      if (key == "merchant_materials") {
        getLibraryList(store.getters.clipJSON.merchant_library_id);
      } else if (key == "tip_materials") {
        // 标签文件夹
        state.showMaterial = true;
        getTipMenu();
      } else if (key == "general_materials") {
        state.currentMaterialId = null;
        state.libraryList = [];
        getFolderList({ merchant_library_id: 0 });
      } else if (key == "AI_materials") {
        // alert("ai生图");
        context.emit("openAicreateImg");
        state.activeKey = "merchant_materials";
        emitFn(null);
      } else if (key == "system_materials") {
        resetSystemMaterial();
      }
      // 储存当前的tabid
    };

    const resetSystemMaterial = () => {
      state.dataSource = [];
      Object.assign(state.systemMaterialSerchData, {
        query: "",
        category: "all",
        page: 1,
        pageSize: 12,
      });
      getSystemMaterialList();
    };

    const chooseFolder = (item) => {
      if (item && item.id) {
        state.Now_merchant_folder_statck_id = item.id;
      }
      if (item && item.folder_type) {
        state.Dfolder_type = item.folder_type;
      }
      if (item) {
        state.currentFolder = item;

        state.folder_name = item.folder_name;
        
        nextTick(() => {
          const obj = refreshPaginationData()
          Object.assign(paginationData, obj)
          getMediaList({ merchant_folder_statck_id: item.id });
        })

        Object.assign(state.storeMemory, {
          merchant_folder_statck_id: item.id,
        });
      }

      // 存储当前文件夹id

      state.showMaterial = true;
    };

    const removeDotAtStart = (str) => {
      return str.slice(str.charAt(0) === "." ? 1 : 0);
    };

    const materialListRef = ref()

    /**
     * 获得文件夹的数据
     * @param params 文件夹id
     * @param ids 上传完成后,将刚刚上传的素材进行勾选
     */
    const getMediaList = (params, ids=[]) => {
      state.materialLoading = true;
      state.materialData = [];

      let extensions = [];
      if (props.extension) {
        props.extension.split(",").forEach((item) => {
          extensions.push(removeDotAtStart(item));
        });
      }

      request
        .post("/work_ai", "/user/shotstack/media/list", {
          ...params,
          pageSize: paginationData.pageSize,
          page: paginationData.current,
          extensions,
        })
        .then((res) => {
          console.log(res,'当前素材 res');
          paginationData.total = res.result.total;
          state.materialData = res.result.data;
          state.materialLoading = false;
          // 回显勾选的项
          if (!props.multiple || props.isClip) {
            const find = res.result.data?.find(ele => ele.id == state.currentMaterial?.id)
            find && (find.checked = true)
            return
          }

          console.log(state.currentMaterialArr,'回显??');
          
          // 回显勾选
          state.materialData.forEach(ele => {
            const find = state.currentMaterialArr.some(item => item.id == ele.id)
            if (find) {
              console.log(find, ele, '找到 回显了!!');
              ele.checked = true
            }
          })

          // 有需要勾选的项
          if (ids.length) {
            ids.forEach(ele => {
              // 最新获取的列表有这个数据
              const find = state.materialData.find(item => item?.id == ele)

              // 已选的列表 没有重复
              const have = state.currentMaterialArr.some(item => item?.id == ele)

              if (find && !have) {
                find.checked = true
                state.currentMaterialArr.push({ ...find})
              }
            })
          }
        });
    };

    const getTextList = (params) => {
      state.materialLoading = true;
      state.materialData = [];
      request
        .get("/work_ai", "/user/shotstack/text/list", params)
        .then((res) => {
          state.materialData = res.result;
          state.materialLoading = false;
        });
    };

    const closeMaterial = () => {
      state.materialVisible = false;
      if (state.currentFolder.folder_type == "text") {
        getTextList({ merchant_folder_statck_id: state.currentFolder.id });
      } else {
        getMediaList({ merchant_folder_statck_id: state.currentFolder.id });
      }
    };

    const getChooseMaterial = (result) => {
      if (!props.multiple || props.isClip) {
        state.currentMaterial = result;
        return;
      }

      // 过滤 重复的项
      const arr = result.filter(ele => !state.currentMaterialArr.some(item => item.id == ele.id))
      console.log(arr,'去重的勾选项');
      
      state.currentMaterialArr.push(...arr);
      // state.currentMaterialArr = result;
    };

    //  选中 子级目录
    const chooseLibrary = (item, index) => {
      state.add_merchant_library_id = "";
      state.add_group_id = "";
      state.checkedgroupId = item.id;
      if (state.currentMaterialId == item.id) return;
      state.currentMaterialId = item.id;
      state.showMaterial = false;
      // 切换项目目录 => 清空即将回显的文件夹id
      state.storeMemory.merchant_folder_statck_id = null;
      store.commit("videoMixCut/SET_FOLDER_IDS", state.storeMemory);

      getFolderList(item);
    };

    const getCropper = (fileUrl) => {
      state.copperVisible = false;
      state.currentMaterial["fileUrl"] = fileUrl;
      emitFn(state.currentMaterial);
    };

    const expandThis = (parent_item) => {
      if (parent_item?.expand) {
        parent_item.expand = false;
      } else {
        parent_item.expand = true;
      }
    };

    const buildProject = () => {
      router.push({
        path: "/workShotstack/materialCenter/shopList",
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {

        // 只有传递了标签 才会加载
        if (props.haveTags.length) {
          const pushItems = JSON.parse(JSON.stringify(props.haveTags))
          // 判断 是否有权限访问 网络素材
          const has_network_material = store.state.user.aiConfig?.has_network_material
          // debugger
          console.log(has_network_material,'has_network_material网络素材');
          if (!has_network_material) {
            // 移除网络素材
            const findNetworkIndex = pushItems.findIndex(ele => ele.name == '网络素材')
            findNetworkIndex != -1 && (pushItems.splice(findNetworkIndex, 1))
          }
          // state.tabList.push(...pushItems);
          state.tabList = [
              ...getTabList(),
              ...pushItems
          ]
        }
          

          // 回显即将打开的文件夹id
          state.storeMemory = JSON.parse(
            JSON.stringify(store.state.videoMixCut.folder_ids)
          );

          // 判断 如果当前高亮key 不为项目素材, 则取消回显
          if (state.activeKey != "merchant_materials") {
            state.folder_use.merchant_folder_statck_id = true;
            state.folder_use.merchant_library_id = true;
          }

          state.currentMaterialArr = [];
          state.currentMaterial = {};
          if (state.activeKey == "merchant_materials") {
            getLibraryList(store.getters.clipJSON.merchant_library_id);
            // getTipMenu()
          } else if (state.activeKey == "system_materials") {
            resetSystemMaterial();
          } else {
            state.libraryList = [];
            getFolderList({ merchant_library_id: 0 });
          }

          if (state.activeKey == 'tip_materials') {
            state.showMaterial = true;
          }
        }
      }
    );

    watch(
      () => props.material_type,
      (val) => {
        if (val == "text") {
          state.tabList.splice(-1, 1);
        }
      },
      {
        immediate: true,
      }
    );

    // table 分页数据
    const pagination = computed(() => ({
      total: state.systemMaterialSerchData.total,
      current: state.systemMaterialSerchData.page,
      pageSize: state.systemMaterialSerchData.pageSize,
      pageSizeOptions: ["10", "20", "50", "100"],
      showSizeChanger: true,
    }));

    // 修改table栏
    const systemMaterialSerchTypeChange = () => {
      // 将数据置空
      state.dataSource = [];
      resetPage();
      // getSystemMaterialList();
    };

    // 获取系统素材
    const getSystemMaterialList = async () => {
      state.dataSource = [];
      state.checkAll = false;
      state.indeterminate = false;
      state.loading = true;
      const url =
        state.systemMaterialSerchType == "image"
          ? "/user/net/material/image/list"
          : "/user/net/material/video/list";

      const params = {
        ...state.systemMaterialSerchData,
        category:
          state.systemMaterialSerchData.category == "all"
            ? ""
            : state.systemMaterialSerchData.category,
      };

      const res = await request.get("/work_ai", url, params);
      console.log(res, "列表数据");
      state.dataSource = res.list;
      state.has_more = res.has_more;
      state.loading = false;
    };

    // 上一页
    const getPrev = () => {
      state.systemMaterialSerchData.page--;
      getSystemMaterialList();
    };

    const getNext = () => {
      state.systemMaterialSerchData.page++;
      getSystemMaterialList();
    };

    const pageChange = (page, pagesize) => {
      state.systemMaterialSerchData.page = page;
      getSystemMaterialList();
    };

    // 重置数据
    const resertSerchDataFn = () => {
      Object.assign(state.systemMaterialSerchData, {
        query: "",
        // 筛选的类型
        category: undefined,
        page: 1,
        pageSize: 12,
      });
      state.systemMaterialSerchType =
        props.material_type == "video_image" ? "video" : props.material_type;
    };

    const resertSerchData = () => {
      resertSerchDataFn();
      nextTick(() => {
        getSystemMaterialList();
      });
    };

    // 系统素材, table改变
    const handleTableChange = (pag, filters, sorter) => {
      // console.log(pag, filters, sorter);
      state.systemMaterialSerchData.page = pag.current;
      state.systemMaterialSerchData.pageSize = pag.pageSize;
      getSystemMaterialList();
    };

    // 标签筛选, 重置当前页码
    const resetPage = () => {
      state.systemMaterialSerchData.page = 1;
      getSystemMaterialList();
    };

    // table 勾选函数
    const ongroupChange = (item) => {
      state.selectedRowKeys = item;
    };

    // 视频开始预览函数
    const onVisibleChange = (url) => {
      viewVideoRef.value.open(url);
    };

    // 系统素材 勾选的项
    const checkeds = computed(() => {
      if (!state.dataSource.length) return [];
      return state.dataSource.filter((ele) => {
        return ele?.checked;
      });
    });

    const timeId = ref(null);
    // 即将导入的素材缓存
    const ImportMaterial = ref([]);
    // 当前选择的素材类型
    const systemMaterialSerchType = ref(null);
    // 导入的进度
    const progress = ref(0);
    // 确定导入素材
    const submitSystemMaterial = () => {
      console.log(checkeds.value, "即将导入的素材");

      if (!checkeds.value) return message.error("请选择要导入的素材!");

      state.importLoading = true;

      // loding弹窗加载
      awaitImportMaterialRef.value.showModal();
      // 处理提交参数
      const getData = () => {
        const findVideoUrl = (item) => {
          let find;
          for (let key in item.videos) {
            const ele = item.videos[key];
            if (ele.height == 1080) {
              return (find = ele);
            }
          }
          return null;
        };

        if (state.systemMaterialSerchType == "image") {
          return checkeds.value.map((ele) => {
            return {
              id: ele.id,
              url: ele.largeImageURL,
            };
          });
        } else {
          return checkeds.value.map((ele) => {
            let find = findVideoUrl(ele);
            if (!find) {
              find = ele.videos.small;
            }
            return {
              id: ele.id,
              duration: ele.duration,
              url: find.url,
            };
          });
        }
      };

      // 请求 启动函数
      const materialDown = () => {
        const params = getData();
        if (props.useType == "mixedCutCreat") {
          // 目标的混剪数据
          const VideoMashup = work_ai_config.value
            ? store.state.videoMixCut.VideoMashup
            : store.state.shotstack.VideoMashup;
          // 目标混剪数据的素材列表
          let targetData =
            VideoMashup.resource_data[props.targetIndex].material_list;
          // 如果已经有了素材, 则需要判断去重
          if (targetData.length) {
            const ids = targetData.map((ele) => ele.id);
            const filterList = params.filter((ele) => !ids.includes(ele.id));
            params.length != filterList.length &&
              // message.success("已为您自动去除重复素材");
              notification.success({
                message: `提示`,
                description: "已为您自动去除重复素材",
                placement: "topRight",
                duration: 2.5,
              });
            getStauts(filterList);
            return;
          } else {
            getStauts(params);
          }
        } else {
          // 否则正常执行
          console.log(params, "参数");
          getStauts(params);
        }
      };

      // 发起下载请求
      const getStauts = async (data) => {
        // 存储现在选择的素材类型
        systemMaterialSerchType.value = state.systemMaterialSerchType;
        const res = await request.post("/work_ai", "/user/net/material/down", {
          file_type: state.systemMaterialSerchType,
          data,
        });
        // 轮询获取上传结果

        getResult(res.task_id, systemMaterialSerchType.value);
      };

      /**
       * @param task_id 轮询id
       * @param systemMaterialSerchType 发送请求时选择的素材类型
       */
      const getResult = async (task_id, systemMaterialSerchType) => {
        // try {
        // 开始loading

        const getResolve = async () => {
          return new Promise(async (resolve, reject) => {
            // try {
            const getRes = async () => {
              timeId.value && clearTimeout(timeId.value);
              const res = await request.get(
                "/work_ai",
                "/user/net/material/result",
                {
                  task_id: task_id,
                }
              );
              console.log(res, "结果接口");
              // 存在缓存中
              ImportMaterial.value = res.result;
              if (!res.result.length) {
                progress.value = 0;
              } else {
                const num = res.result.reduce((acc, cur) => {
                  return acc + cur.progress;
                }, 0);
                progress.value = (num / res.result.length).toFixed(2);
              }

              const someDoing = res.result.some((ele) => ele.status == "doing");
              if (someDoing) {
                timeId.value = setTimeout(() => {
                  getRes(task_id);
                }, 3000);
              } else {
                return resolve(res);
              }
            };
            await getRes();
            // } catch (error) {
            // clearTimeout(timeId.value);

            // await getRes();
            // }
          });
        };

        // 一直到获取到数据为止
        const res = await getResolve();

        const overData = res.result.filter((ele) => ele.code == 0);
        console.log(overData, "上传完成且成功的数据");
        if (props.useType == "mixedCutCreat") {
          importFn({
            overData,
            systemMaterialSerchType,
          });
        } else {
          networkMaterialUse(overData);
        }
      };

      // 启动上面的函数
      materialDown();
    };

    const importFn = (params) => {
      const { overData, systemMaterialSerchType } = params;
      // 目标的混剪数据
      const VideoMashup = work_ai_config.value
        ? store.state.videoMixCut.VideoMashup
        : store.state.shotstack.VideoMashup;
      // 目标混剪数据的素材列表
      let targetData =
        VideoMashup.resource_data[props.targetIndex].material_list;
      // 素材的结束时间
      let end_time;
      const lastMaterial = targetData[targetData.length - 1];
      // 取该视频组 最后一个素材, 获取end_time字段
      if (lastMaterial) {
        end_time = lastMaterial.end_time;
      } else {
        end_time = 0;
      }

      let list;
      // const getEndTime = (data) => {
      //   end_time += data.time;
      //   return end_time;
      // };
      if (systemMaterialSerchType == "image") {
        // 处理成混剪需要的格式
        list = overData.map((ele, index) => {
          return {
            material_url: ele.url,
            material_name: `系统素材-${index}`,
            scene_type: ele.file_type,
            org_id: utils.getOrgId(),
            material_duration: 3000,
            material_extension: ele.file_extension,
            material_size: ele.file_size,
            material_path: ele.path,
            url: ele.url,
            start_time: 0,
            end_time: 3000,
            id: ele.id,
            media_id: ele.media_id,
          };
        });
        targetData.push(...list);
        console.log(targetData, "要导入混剪的图片数据");
      } else {
        // 处理成混剪需要的格式
        list = overData.map((ele, index) => {
          return {
            material_url: ele.url,
            material_name: `系统素材-${index}`,
            scene_type: ele.file_type,
            org_id: utils.getOrgId(),
            material_duration: ele.material_duration,
            material_extension: ele.file_extension,
            material_size: ele.file_size,
            material_path: ele.path,
            url: ele.url,
            start_time: 0,
            end_time: ele.material_duration,
            id: ele.id,
            media_id: ele.media_id,
          };
        });
        targetData.push(...list);
      }
      work_ai_config.value
        ? store.dispatch("videoMixCut/SetVideoMashup", VideoMashup)
        : store.dispatch("shotstack/SetVideoMashup", VideoMashup);
      stopImport();
      // } catch (error) {
      //   setTimeout(() => {
      //     getResult(task_id);
      //   }, 3000);
      // }
    };

    // 素材预览
    const toview = (url, type) => {
      if (type == "img") {
        viewImgRef.value.open(url);
      } else {
        console.log(url, "视频");

        // return;

        viewVideoRef.value.open(url);
      }
    };

    // 单个勾选
    const itemSelectChange = (event,item) => {

      const isAll = state.dataSource.every((ele) => ele.checked);
      const someSelect = state.dataSource.some((ele) => ele.checked);
      state.checkAll = isAll;
      if (!isAll) {
        state.indeterminate = someSelect;
      } else {
        state.indeterminate = false;
      }
    };

    // 点击容器
    const materialBoxClick = (item) => {
      
      // 如果是单选, 并且已经选择了至少一项, 不允许再次选择
      if (!props.multiple && checkeds.value.length >= 1) return;
      item.checked = !item.checked;
      nextTick(() => {
        itemSelectChange();
      });
    };

    // 全选反选
    const onCheckAllChange = (e) => {
      console.log(e, "全选反选");
      state.dataSource.forEach((ele) => (ele.checked = state.checkAll));
      state.indeterminate = false;
    };

    // 取消导入
    const cancelUpload = () => {
      clearTimeout(timeId.value);
      message.destroy();
      state.importLoading = false;
      emitFn(null);
    };

    // 导入完成或停止导入
    const stopImport = () => {
      state.importLoading = false;
      awaitImportMaterialRef.value.closeModal();
      state.dataSource.forEach((ele) => (ele.checked = false));
      state.indeterminate = false;
      progress.value = 0;
      emitFn(null);
      clearTimeout(timeId.value);
      message.destroy();
    };

    // 停止轮询, 将上传成功的进行导入
    const awaitImportMaterialRefClose = () => {
      const overData = ImportMaterial.value.filter(
        (ele) => ele.code == 0 && ele.status == "done"
      );
      if (!overData.length) {
        stopImport();
        return;
      }

      if (props.useType == "mixedCutCreat") {
        importFn({
          overData,
          systemMaterialSerchType: systemMaterialSerchType.value,
        });
        stopImport();
      } else {
        networkMaterialUse(overData);
      }
    };

    // 不是混剪的情况下 用网络素材
    const networkMaterialUse = (overData) => {
      overData.forEach((ele) => {
        ele.material_url = ele.url;
      });
      state.importLoading = false;
      awaitImportMaterialRef.value.closeModal();
      state.dataSource.forEach((ele) => (ele.checked = false));
      state.indeterminate = false;
      progress.value = 0;
      emitFn(overData);
      clearTimeout(timeId.value);
    };

    // 封装 emit:close 函数
    const emitFn = (data) => {
      context.emit("close", data);
      // emit 现在使用的项目和文件夹id等信息
      // context.emit("storeMemory", state.storeMemory)
      store.commit("videoMixCut/SET_FOLDER_IDS", state.storeMemory);

      // 重置回显开关
      state.folder_use.merchant_folder_statck_id = false;
      state.folder_use.merchant_library_id = false;
    };

    // 从文件夹中退出
    const materialListBack = () => {
      state.showMaterial = false;
      // 清空即将回显的文件夹id
      state.storeMemory.merchant_folder_statck_id = null;
      store.commit("videoMixCut/SET_FOLDER_IDS", state.storeMemory);
    };

    const paginationChange = (page, pageSize) => {
      if (state.activeKey == 'tip_materials') {
        // 标签素材
        toDetail()
      } else {
        // 项目素材或 通用素材
        getMediaList({merchant_folder_statck_id: state.currentFolder?.id})
      }
    }

    const refreshPaginationData = () => {
        return {
        pageSize: 10,
        current: 1,
        total:0
      }
    }

    // 素材库 分页data
    const paginationData = reactive(refreshPaginationData())


    // 取消勾选
    const cancelChecked = (item) => {
      // debugger
      const index = state.currentMaterialArr.findIndex(ele => ele.id == item.id)
      if (index!=-1) {
        state.currentMaterialArr.splice(index, 1)
      }

      const findCurrent = state.materialData.find(ele => ele.id == item.id)
      if (findCurrent) {
        findCurrent.checked = false
      }
    }

    // 刷新列表, 并且完成勾选动作
    const refreshList = (ids=[]) => {
      console.log(ids, '父组件收到 ids');
      const obj = refreshPaginationData()
      Object.assign(paginationData, obj)
      getMediaList({merchant_folder_statck_id: state.currentFolder?.id}, ids)
    }
    return {
      ...toRefs(state),
      materialListRef,
      categoryList,
      columns,
      pagination,
      viewVideoRef,
      checkeds,
      Empty,
      work_ai_config,
      timeId,
      viewImgRef,
      awaitImportMaterialRef,
      progress,
      ImportMaterial,
      paginationData,
      refreshList,
      cancelChecked,
      paginationChange,
      emitFn,
      materialListBack,
      networkMaterialUse,
      resetSystemMaterial,
      stopImport,
      awaitImportMaterialRefClose,
      resetPage,
      resertSerchDataFn,
      materialBoxClick,
      onCheckAllChange,
      itemSelectChange,
      toview,
      cancelUpload,
      getPrev,
      getNext,
      getSystemMaterialList,
      systemMaterialSerchTypeChange,
      resertSerchData,
      pageChange,
      submitSystemMaterial,
      onVisibleChange,
      ongroupChange,
      handleTableChange,
      floder_videoDate,
      handleOk,
      handleClose,
      newSubFolder,
      closeAdd,
      handleTabChange,
      getTipMenu,
      ToTipDetail,
      chooseFolder,
      closeMaterial,
      getChooseMaterial,
      chooseLibrary,
      getCropper,
      expandThis,
      Tipitem,
      handleChange,
      toDetail,
      buildProject,
      uploadSuccess,
      uploadSuccess_tong,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-image) {
  display: flex;
  align-items: center;

  // background-color: #000000 !important;
  img {
    height: 100%;
    object-fit: contain;
    background-color: #e7e7e7;
  }
}

// 底部分页器
.bottom_pagination{
  padding-top: 5px;
}

.merchant_materials {
  height: 500px;
  display: flex;

  .left_menu {
    height: 100%;
    width: 20%;
    border-right: 1px solid #eee;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      width: 5px;
      background-color: transparent;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(193, 193, 193, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }

    .parent_con {
      .parent_item {
        cursor: pointer;
        margin-top: 15px;

        .parent_name {
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 20px;
          color: #666;

          .expand_icon {
            color: #999;
            font-size: 12px;
          }
        }

        .menu_con {
          .menu_item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #666;
            font-size: 15px;
            cursor: pointer;
            margin-top: 7px;
            padding-left: 15px;

            &.active {
              color: #2878ff;
            }
          }
        }
      }
    }

    .menu_con {
      .menu_item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #666;
        font-size: 15px;
        cursor: pointer;
        margin-top: 5px;

        &.active {
          color: #2878ff;
        }
      }
    }
  }

  .right_material {
    height: 100%;
    width: 80%;
    padding: 0 10px;
    overflow: hidden;
    // overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      width: 5px;
      background-color: transparent;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(193, 193, 193, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
  }
}

.general_materials {
  height: 500px;
  width: 100%;

  .custom_upload {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #f9f9f9 !important;
    border: 1px dashed #ddd;
    color: #696969;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;

    .upload_txt {
      margin-top: 5px;
    }
  }
}

.tip_materials {
  height: 500px;
  display: flex;

  .left_menu {
    width: 200px;
    height: 100%;
    border-right: 1px solid #eee;
    padding-top: 10px;

    //    overflow-y: scroll
    .Tip_menu_item {
      cursor: pointer;

      margin-bottom: 10px;
      // border-bottom: 1px solid #eee;
      // padding-bottom: 5px;
      margin-right: 10px;
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      align-items: center;

      .expand_icon {
        color: #999;
        font-size: 12px;
      }

      .Tip_menu_title {
        font-size: 15px;
        cursor: pointer;
        color: #666;
      }
    }

    .Bottom_menu_tip {
      margin-bottom: 5px;

      .Bottom_menu_titl {
        margin-bottom: 5px;
      }
    }
  }

  .right_material {
    width: calc(100% - 200px);
  }
}

// 系统素材样式
.system_materials {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .table_box {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    width: 100%;
    gap: 15px;
    align-content: flex-start;
    margin-bottom: 20px;

    &::-webkit-scrollbar {
      display: none;
    }

    .emptyBox {
      width: 100%;
      height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .material_item_image {
      background-color: #000;
      position: relative;
      width: 212px;
      height: 130px;
      cursor: pointer;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #00000073;
        transition: all 0.3s;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
      }

      &:hover {
        .bottom_icon {
          opacity: 1;
        }

        &::after {
          opacity: 1;
        }
      }

      .is_content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }
      }

      .bottom_icon {
        z-index: 10;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%);
        color: #fff;
        font-size: 28px;
        opacity: 0;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          color: #91d5ff;
        }
      }

      .top_checkbox {
        position: absolute;
        top: 3px;
        left: 5px;
        z-index: 10;
      }

      .item_bottom_box {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #00000073;
        color: #fff;
        padding-left: 5px;
        width: 100%;
        z-index: 10;

        .material_name {
          font-size: 14x;
        }
      }
    }
  }

  // 头部搜索条件样式
  .top_serchform_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;

    .serch_box {
      display: flex;
      align-items: center;
      gap: 30px;
      .serch_item {
        display: flex;
        align-items: center;

        .serch_title {
          font-size: 14px;
          text-wrap: nowrap;
        }
      }

      .btns {
        display: flex;
        gap: 10px;
      }
    }
  }

  //  底部按钮
  .bottom_btns {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  // 分页
  .pagination {
    display: flex;
    align-items: center;
  }
}

.text-red {
  color: #2878ff !important;
}

.no-shuju {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}
</style>
